<template>
    <div>
        <div class="title">是否有上边距:</div>
        <div>
            <el-select v-model="tempValue.marginFlag" placeholder="请选择">
                <el-option
                        v-for="item in marginData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="title">展示形式:</div>
        <div>
            <el-select v-model="tempValue.flex" placeholder="请选择">
                <el-option
                        v-for="item in flexData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="title">是否有标题:</div>
        <div>
            <el-select v-model="tempValue.isShowFlag" placeholder="请选择">
                <el-option
                        v-for="item in isShowData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="title" v-if="tempValue.isShowFlag=='true'">标题内容:</div>
        <div v-if="tempValue.isShowFlag=='true'">
            <el-input v-model="tempValue.title" type="textarea" :rows="2"></el-input>
        </div>
        <div class="title">显示几条:</div>
        <div>
            <el-input-number v-model="tempValue.page.pageSize"  :min="1" :max="100" label="描述文字"></el-input-number>
        </div>
    </div>
</template>

<script>
    import {mapState, mapGetters} from 'vuex'
    export default {
		name: "qkStoreHotGoodsAttr",
        props: {
            prop: {
                type: Object,
                default() {
                    return {
                        goodsList:[],
                        flex:"1",
                        marginFlag:'true',
                        title:"热门商品",
                        isShowFlag:'true',
                        page:{
                            pageSize:20,
                            currentPage: 1,
                        }
                    }
                }
            }
        },
        data() {
            return {
                tempValue: {},
                //    弹框受否显示
                isDisplay:false,
                ptOrMg:'mg',
                flexData:[
                    {
                        value: '1',
                        label: '横向带划线价'
                    }, {
                        value: '2',
                        label: '纵向带划线价'
                    }, {
                        value: '3',
                        label: '纵向带抢购按钮'
                    }, {
                        value: '4',
                        label: '纵向价格一排'
                    },
                    // {
                    //     value: '5',
                    //     label: '纵向带拼团按钮'
                    // },
                    {
                        value: '6',
                        label: '横向单个价格'
                    },{
                        value: '7',
                        label: '横向3个单个单价格'
                    }
                ],
                marginData:[{
                    value: 'true',
                    label: '是'
                },{
                    value: 'false',
                    label: '否'
                }],
                isShowData:[
                    {
                        value: 'true',
                        label: '是'
                    },{
                        value: 'false',
                        label: '否'
                    }
                ]
            }
        },
        methods:{

        },
        mounted() {
            this.tempValue = this.prop;
        },
        watch: {
		    prop(e){
                this.tempValue =e
            },
            tempValue: {
                handler(e){
                    this.$store.commit("updateActiveElementProp",e);
                },
                deep:true
            },
            deep:true
        }
	}
</script>

<style lang="scss" scoped>
    .arrt-eidt-wrapper{
        display: flex;
        .arrt-eidt-l{
            width: 108px;
        }
        .arrt-eidt-r{
            flex: 1;
        }
    }
    .title{
        vertical-align: middle;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

</style>
